<template>
  <div class="w-full h-full" ref="tableAreaRef">
    <el-table
      :data="goodList"
      :tree-props="treeProps"
      row-key="id"
      default-expand-all
      :row-class-name="tableRowClassName"
      :span-method="arraySpanMethod"
      class="orderTable"
      ref="tableRef"
      style="height: 100%"
    >
      <el-table-column
        :label="$t('goods_list.序号')"
        width="80"
        prop="mergeColumn"
      >
        <template #default="{ row }">
          <div v-if="row.saleSkus" class="goodList-item-header flex_aic_jcsb">
            <div class="flex_aic_jcsb" :style="`width: ${tableWidth - 240}px;`">
              <div class="color-999999">
                <span>{{ $t("orderTable.订单号") }}：{{ row.saleNo }}</span>
                <!-- <span class="ml20"
                  >{{ $t("orderTable.店铺") }}【{{
                    row["tenantName" + locale]
                  }}】</span
                > -->
                <span class="ml32">{{ $t("orderTable.订单状态") }}：</span>
                <span class="color-primary">{{
                  getStatusText(row.status)
                }}</span>
              </div>
              <div class="color-999999">
                <span
                  >{{ $t("orderTable.下单时间") }}：{{
                    moment(row.createdTime).format("YYYY-MM-DD HH:mm:ss")
                  }}</span
                >
              </div>
            </div>
          </div>
          <span v-else>{{ row.index }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="mergeColumn"
        :label="$t('orderTable.用户信息')"
        width="300"
      >
        <template #default="{ row }">
          <div class="border-left-right">
            <div>
              <span class="color-999999">{{ $t("orderTable.用户ID") }}：</span
              >{{ row.vipId }}
            </div>
            <div>
              <span class="color-999999">{{ $t("orderTable.用户名") }}：</span
              >{{ row.vipNickName }}
            </div>
            <div>
              <span class="color-999999">{{ $t("orderTable.手机号码") }}：</span
              >{{ row.vipPhone }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="mergeColumn"
        :label="t('service.商户信息')"
        width="300"
      >
        <template #default="{ row }">
          <div class="border-left-right">
            <div>
              <span class="color-999999">{{ t("service.商户ID") }}：</span
              >{{ row.tenantId }}
            </div>
            <div>
              <span class="color-999999">{{ t("service.商户名称") }}：</span
              >{{ row["tenantName" + locale] }}
            </div>
            <div>
              <span class="color-999999">{{ t("service.商户联系方式") }}：</span
              >{{ row.tenantServicePhone }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        :label="$t('orderTable.菜品信息')"
        width="500"
      >
        <template #default="{ row }">
          <GoodsTableTd :row="row" />
        </template>
      </el-table-column>
      <el-table-column
        v-if="props.type === '5'"
        prop="signTime"
        :label="$t('orderTable.订单完成时间')"
        width="200"
        :formatter="(row) => moment(row.signTime).format('YYYY-MM-DD HH:mm:ss')"
      />
      <el-table-column
        :label="$t('orderTable.小料')"
        width="200"
      >
        <template #default="{ row }">
          <div class="border-left-right">
            <div>{{$t('currency.￥')}}{{row.payRealMate}}</div>
            <div class="color-999999">
              {{row.skuMateDetail.map(v=> v['mateName' + locale]).join(',')}}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="mergeColumn"
        :label="$t('orderTable.小费金额')"
        width="200"
        :formatter="(row) => $t('currency.￥') + row.payRealTip"
      />
      <el-table-column
        prop="mergeColumn"
        :label="$t('orderTable.实付金额')"
        width="200"
        :formatter="(row) => '￥' + row.salePayReal"
      />
      <el-table-column
        prop="mergeColumn"
        :label="$t('orderTable.桌号')"
        width="200"
      >
        <template #default="{ row }">
          {{ row.tableCode }}
        </template>
      </el-table-column>
      <el-table-column
        prop="mergeColumn"
        :label="$t('orderTable.支付时间')"
        width="200"
      >
        <template #default="{ row }">
          {{
            row.payTime ? moment(row.payTime).format("YYYY-MM-DD HH:mm:ss") : ""
          }}
        </template>
      </el-table-column>
      
      <el-table-column
        prop="mergeColumn"
        :label="$t('orderTable.操作')"
        fixed="right"
        min-width="200"
      >
        <template #default="{ row }">
          <div class="operate_btn" @click="handleReceive(row)">
            {{ $t("orderTable.查看详情") }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import moment from "moment";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import GoodsTableTd from "@/components/goodsTableTd.vue";

const { locale, t } = useI18n();
const router = useRouter();

const tableRef = ref();
const tableAreaRef = ref();
const tableWidth = ref(0);
const props = defineProps({
  goodList: {
    type: Array,
    default: () => [],
  },
  type: {
    type: String,
    default: "",
  },
});

const treeProps = reactive({
  checkStrictly: false,
  children: "saleSkus",
});

const tableRowClassName = ({ row, rowIndex }) => {
  if (row.saleSkus) {
    return "warning-row";
  }
  return "";
};
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // console.log("column===", column);

  if (row.saleSkus && columnIndex === 0) {
    return [1, 100];
  }
  if (row.saleSkus && columnIndex !== 0) {
    return [1, 0];
  }
  if (!row.saleSkus) {
    if (column.property === "mergeColumn") {
      console.log("row===");

      if (row.saleSkusIndex === 0) {
        return [row.saleSkusLength, 1];
      } else {
        return [0, 1];
      }
    }
  }
};
// 退款状态： -6退款完成 -5待卖家签收 -4退款驳回 -3退款中 -2申请退款 -1撤销申请 0未申请
// 订单状态：-1已取消，1待付款 3待发货，4待收货，5已完成
const statusMap = {
  "-1": t("orderTable.已取消"),
  1: t("orderTable.待付款"),
  3: t("orderTable.待发货"),
  4: t("orderTable.待收货"),
  5: t("orderTable.已完成"),
};

const getStatusText = (status) => {
  return statusMap[status] || status;
};

const refundStatusMap = {
  "-6": t("orderTable.退款完成"),
  "-5": t("orderTable.待卖家签收"),
  "-4": t("orderTable.退款驳回"),
  "-3": t("orderTable.退款中"),
  "-2": t("orderTable.申请退款"),
  "-1": t("orderTable.撤销申请"),
  0: t("orderTable.未申请"),
};

const handleReceive = (row) => {
  Storage.set("orderDetail", row, true);
  router.push({
    path: "/manage_product/order_lists_detail",
    query: {
      id: row.saleId,
    },
  });
};

onMounted(() => {
  tableWidth.value = tableAreaRef.value.clientWidth;
  window.addEventListener("resize", function () {
    nextTick(() => {
      tableWidth.value = tableAreaRef.value.clientWidth;
    });
  });
});
</script>
<style lang="scss" scoped>
.goodList {
  .table-header {
    height: 40px;
    margin-bottom: 10px;
    border-radius: 3px;
    background: #f5f5f5;
    .table-header-item {
      flex-shrink: 0;
      height: 40px;
      background: #f5f5f5;
      color: #333;
      font-size: 14px;
      line-height: 30px;
      padding: 0 13px;
    }
  }

  .goodList-item {
    .goodList-item-header {
      width: 100%;
      height: 35px;
      padding: 0 13px;
      background: #f3f9fe;
      > div {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
      }
    }
    .goodList-item-content {
      .sku {
        padding: 6px 0;
        border-bottom: 1px solid #f5f5f5;
        > div {
          padding: 0 13px;
        }
      }
    }
  }
}

.orderTable {
  :deep(.el-table__expand-icon) {
    display: none !important;
  }

  :deep(.warning-row) {
    background-color: #f3f9fe;
    height: 20px;
    .el-table__cell {
      padding: 4px 0;
    }
  }
  :deep(.el-table__placeholder) {
    display: none;
  }
  :deep(.el-table__indent) {
    display: none;
  }
  .goods_spec {
    margin-top: 12px;
    font-size: 12px;
    flex-wrap: wrap;
    span {
      white-space: nowrap;
      padding: 2px 5px;
      background: #f5f5f5;
      border-radius: 3px;
    }
  }
  .operate_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 26px;
    margin-top: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    &:first-child {
      margin-top: 0;
    }
  }

  .border-left-right {
    // border-left: 1px solid #ebeef5;
  }
}
</style>
